<!-- 工程管理 -->
<template>
  <el-form class="query-container" ref="queryFormRef" :model="queryParams" :inline="true" @submit.native.prevent>
    <el-form-item label="" prop="field" style="margin-right:5px;">
      <el-select v-model="queryParams.field" style="width:150px;">
        <el-option value="order_number" label="按订单编号"></el-option>
        <el-option value="c.name" label="按客户姓名"></el-option>
        <el-option value="c.contact_phone" label="按手机号"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="" prop="keyword">
      <el-input
          v-model="queryParams.keyword"
          clearable
          placeholder="输入关键字查询"
          @keyup.enter.native="handleQuery"
          style="width:150px;"
      />
    </el-form-item>
    <el-form-item>
      <el-button v-if="$hasPermission('crm:project:select')" type="primary"
                 @click="handleQuery">搜索</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </el-form-item>
    <br>
    <el-form-item label="图纸分类" prop="drawStatus">
      <el-radio-group v-model="queryParams.drawStatus">
        <el-radio-button :label="undefined" @change="resetQuery">全部图纸</el-radio-button>
        <el-radio-button :value="10" @change="handleQuery">待审核图纸</el-radio-button>
        <el-radio-button :value="20" @change="handleQuery">修改中图纸</el-radio-button>
        <el-radio-button :value="30" @change="handleQuery">审核完成图纸</el-radio-button>
      </el-radio-group>
    </el-form-item>
  </el-form>

  <div class="inner-container">
    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="orderNumber" label="订单编号"></el-table-column>
      <el-table-column prop="orderDate" label="订单日期"></el-table-column>
      <el-table-column prop="customerName" label="客户姓名" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="propertyName" label="楼盘名称"></el-table-column>
      <el-table-column prop="propertyAddr" label="楼盘地址"></el-table-column>
      <el-table-column prop="type" label="客户类型"
                       :formatter="customerTypeFormatter"></el-table-column>
      <el-table-column prop="designer" label="设计师"></el-table-column>
      <el-table-column prop="manager" label="客户经理"></el-table-column>
      <el-table-column prop="createTime" label="提交时间"></el-table-column>
      <el-table-column prop="p.updateTime" label="最近审核时间"></el-table-column>
      <el-table-column prop="drawStatus" label="图纸审核状态"
                       :formatter="drawStatusFormatter" show-overflow-tooltip></el-table-column>
      <el-table-column label="图纸管理" align="center" fixed="right" width="200">
        <template #default="scope">
          <el-button v-if="$hasPermission('crm:project:updata')" type="primary" link
                     @click="goDrawStatusView(scope.row)">查看图纸</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页栏 -->
    <br>
    <el-pagination
        :total="total"
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import request from "@/utils/request";
import {useRouter} from "vue-router";

const router = useRouter();

//定义加载方法
const loading = ref(false)
//引用
const queryFormRef = ref()
// 定义查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  field: undefined,
  keyword: undefined,
  drawStatus: undefined
})
//定义页码数
const total = ref(0)
//定义数组用来保存表格数据
const tableData = ref([])
const selectedIds = ref([])

//测试数据
const listData = () => {
  loading.value = true
  request.get('/api/crm/project/loadList', {
    params: queryParams.value
  }).then(res => {
    total.value = res.data.total
    tableData.value = res.data.list
    loading.value = false
  })
}

//处理选择更改
const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(item => item.id)
}

//处理搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1
  listData()
}

//重置搜索条件
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    field: undefined,
    keyword: undefined,
    drawStatus: undefined
  }
  handleQuery()
}

//处理页码数变化
const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  listData()
}

//处理每页条数变化
const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  listData()
}


//定义数组保存字典项数据
const drawStatusArr = ref([])
const customerTypeArr = ref([])
onMounted(()=>{
  loadDictOptions(drawStatusArr,'draw_status');
  loadDictOptions(customerTypeArr,'customer_type');
})
const  drawStatusFormatter = (row,column,cellValue,index)=>{
  if(!drawStatusArr.value){
    return cellValue;
  }
  for(let item of drawStatusArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

const  customerTypeFormatter = (row,column,cellValue,index)=>{
  if(!customerTypeArr.value){
    return cellValue;
  }
  for(let item of customerTypeArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

const goDrawStatusView = (row)=>{
  router.push({path: '/crm/drawing_audit', query: {oid: row.ordersId,cid: row.customerId}})
}

//一进页面就获取数据
onMounted(() => {
  listData()
})
</script>

<style scoped>

</style>
